﻿<div id="body">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>So we heard you like to use $select, $expand and $inlinecount...</h1>
            </hgroup>
            <p>
                Linq to Querystring is an expression parser for .NET Web API that supports a subset of the OData URI Specification. 
                Currently in a pre-release alpha release, the following odata query options are supported (with some caveats):
                <ul>
                    <li>Paging and Ordering with <strong>$top</strong>, <strong>$skip</strong> & <strong>$orderby</strong> & <strong>$inlinecount</strong>
                    </li>
                    <li>Filtering on simple properties with <strong>$filter</strong>
                    </li>
                    <li>Projections on simple properties with <strong>$select</strong>
                    </li>
                </ul>
                See the <a href="https://github.com/Roysvork/LinqToQuerystring">GitHub Repo</a> for more information on currently supported features.
            </p>
        </div>
    </section>
    <section class="content-wrapper main-content clear-fix">
        <h3>Try it out:</h3>
        <ol class="round">
            <li class="one">
                <h5>Type your oData query here:</h5>
                http://api/movies
                <input type="text" id="queryexpression" value="?$orderby=Title" /><input type="button" id="go" value="Go" />
            </li>
            <li class="two">
                <h3>See the results:</h3>
                <div id="error" data-bind="if: hasError"><span class="error" data-bind="    text: error"></span></div>
                <div id="countContainer">
                    <label>Count:</label><span data-bind="text: count">N/A</span></div>
                <table>
                    <thead>
                        <tr>
                            <!-- ko foreach: { data: headings, as: 'heading' } -->
                            <th data-bind="text: heading"></th>
                            <!-- /ko -->
                        </tr>
                    </thead>
                    <tbody>
                        <!-- ko foreach: { data: data, as: 'record' } -->
                        <tr>
                            <!-- ko foreach: { data: $root.headings, as: 'field' } -->
                            <td data-bind="text: record[field]"></td>
                            <!-- /ko -->
                        </tr>
                        <!-- /ko -->
                    </tbody>
                </table>
            </li>
        </ol>
    </section>
</div>
@section scripts
{
    <script type="text/javascript">

        var model = {};
        model.headings = ko.observableArray();
        model.data = ko.observableArray(),
        model.count = ko.observable(),
        model.error = ko.observable(),
        model.hasError = ko.dependentObservable(function () {
            if (model.error());
            {
                return true;
            }
        });

        $(document).ajaxError(function (event, jqxhr, settings, exception) {
            var error = $.parseJSON(jqxhr.responseText);
            var message = error.ExceptionMessage ? error.ExceptionMessage : error.Message;
            model.error(message);
        });

        var load = function () {
            var query = $("#queryexpression").val();
            $.get("/api/Values" + query, function (data) {
                var headings = [];

                var results = data;
                if (data && data.Count) {
                    results = data.Results;
                }

                if (results && results.length > 0) {
                    for (prop in results[0]) {
                        if (results[0].hasOwnProperty(prop)) {
                            headings.push(prop);
                        }
                    }
                }

                if (data && data.Count) {
                    model.count(data.Count);
                } else {
                    model.count("N/A");
                }
                model.headings(headings);
                model.data(results);
                model.error(null);
            });
        };

        $(document).ready(function () {

            ko.applyBindings(model);

            $("#go").click(load);
            load();
        });
    </script>
}